<template>
  <el-card>
    <el-upload
        class="upload-demo"
        drag
        multiple
        :http-request="uploadFile"
        :show-file-list="false"
    >
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        <div class="text-[#161823] text-[20px]">点击上传 或直接将视频文件拖入此区域</div>
        <div class="text-[#25263299] text-[12px] mt-[10px]">
          为了更好的观看体验和平台安全，平台将对上传的视频预审。超过40秒的视频建议上传横版视频
        </div>
      </div>
    </el-upload>
    <!--上传列表-->
  </el-card>
</template>

<script setup>
import {UploadFilled} from '@element-plus/icons-vue'
import {uploadChunk, uploadMerge} from "@/api/file"
import {ElMessage} from "element-plus";


const uploadFile = async ({file}) => {
  // 使用正则表达式匹配中文字符
  const regex = /[\u4e00-\u9fa5]/;
  const flag = regex.test(file.name);
  if (flag) return ElMessage.error("上传文件不能包含中文")


  const chunkSize = 5 * 1024 * 1024; // 5MB
  const totalChunks = Math.ceil(file.size / chunkSize);

  for (let i = 0; i < totalChunks; i++) {
    const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkIndex', i);
    formData.append('chunkTotal', totalChunks);
    formData.append('identifier', file.name);

    await uploadChunk(formData)
  }

  const mergeFormData = new FormData();
  mergeFormData.append('chunkTotal', totalChunks);
  mergeFormData.append('identifier', file.name);
  // 合并切片
  await uploadMerge(mergeFormData)
  ElMessage.success("上传成功")
}
</script>

<style scoped lang="scss">

</style>
